<template>
	<div>
		<div v-if="status === 1" class="main-area">
			<div>
				<p class="font-size-18 font-color-343434 main-area-replied__title">
					{{ `平台回复：` }}
				</p>
				<div class="main-area-replied__content">
					<div class="font-size-18 content-response" v-html="list.answer">
						<!-- {{ list.answer }} -->
					</div>
					<!-- <van-image class="content-imgs" v-for="(item, index) of list.img_arr" :key="index" width="8.743961rem" height="5.507246rem" :src="item" /> -->
					<p class="font-size-12 content-time">{{ `回复时间：${list.updated_at}` }}</p>
				</div>
			</div>
			<div>
				<p class="font-size-18 font-color-343434 main-area-replied__title">
					{{ `反馈内容：` }}
				</p>
				<div class="main-area-replied__content">
					<p class="font-size-18 content-response">
						{{ list.content }}
					</p>
					<van-image
						class="content-imgs"
						v-for="(item, index) of list.img_arr"
						:key="index"
						width="8.743961rem"
						height="5.507246rem"
						:src="item"
					/>
					<p class="font-size-12 content-time">{{ `反馈时间：${list.created_at}` }}</p>
				</div>
			</div>
		</div>
		<div v-if="status === 0" class="main-area">
			<div class="news-details-content">
				<div class="title font-size-16">{{ '反馈内容：' }}</div>
				<div class="title-date font-size-12">
					<span>{{ `反馈时间：${list.created_at}` }}</span>
				</div>
				<div class="info font-size-14">
					{{ list.content }}
				</div>
				<van-image
					class="content-imgs"
					width="9.323671rem"
					height="6.231884rem"
					v-for="(item, index) of list.img_arr"
					:key="index"
					:src="item"
				/>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'index',
	props: ['status', 'list'],
	components: {},
	data() {
		return {};
	},
	mounted() {
		console.log(this.status);
	},
	methods: {},
};
</script>

<style lang="scss" scoped>
.main-area {
	width: 9.323671rem;
	margin-top: 0.483092rem;
	padding: 0 0.338164rem;

	p {
		margin: 0;
	}

	.main-area-replied__title {
		margin-bottom: 0.289855rem;
	}

	.main-area-replied__content {
		background: #f9f9f9;
		border-radius: 6px;

		.content-response {
			padding: 0.289855rem 0.289855rem 0.241546rem 0.289855rem;

			::v-deep img {
				width: 100%;
			}
		}

		.content-imgs {
			padding: 0 0.289855rem;
		}

		.content-time {
			padding: 0.628019rem 0.289855rem 0.289855rem 0.289855rem;
		}
	}

	.news-details-content {
		.title {
			font-weight: bold;
			color: #333333;
			padding: 0 0 0 0;
		}

		.title-date {
			margin-top: 0.193237rem;
			color: #a8a8a8;
		}

		.info {
			margin: 0.338164rem 0 0.241546rem 0;
			text-indent: 0.676329rem;
			color: #06121e;
		}
	}
}
</style>
